{% extends 'base.html' %}
{% load static %}

{% block title %}账号设置 - 本地有约{% endblock %}

{% block extra_css %}
<style>
    .settings-container {
        max-width: 1000px;
        margin: 2rem auto;
    }
    
    .settings-sidebar {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: var(--shadow-md);
        position: sticky;
        top: 100px;
    }
    
    .settings-nav .nav-link {
        color: var(--dark-text);
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        transition: all 0.3s ease;
    }
    
    .settings-nav .nav-link:hover,
    .settings-nav .nav-link.active {
        background: var(--gradient-primary);
        color: white;
    }
    
    .settings-content {
        background: white;
        border-radius: 1rem;
        padding: 2rem;
        box-shadow: var(--shadow-md);
    }
</style>
{% endblock %}

{% block content %}
<div class="container settings-container mb-5">
    <h2 class="mb-4"><i class="fas fa-cog"></i> 账号设置</h2>
    
    <div class="row">
        <!-- 左侧导航 -->
        <div class="col-lg-3 mb-4">
            <div class="settings-sidebar">
                <ul class="nav nav-pills flex-column settings-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#profile" data-bs-toggle="pill">
                            <i class="fas fa-user"></i> 基本资料
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#security" data-bs-toggle="pill">
                            <i class="fas fa-shield-alt"></i> 账号安全
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#privacy" data-bs-toggle="pill">
                            <i class="fas fa-lock"></i> 隐私设置
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#notification" data-bs-toggle="pill">
                            <i class="fas fa-bell"></i> 通知设置
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 右侧内容 -->
        <div class="col-lg-9">
            <div class="tab-content">
                <!-- 基本资料 -->
                <div class="tab-pane fade show active" id="profile">
                    <div class="settings-content">
                        <h4 class="mb-4">基本资料</h4>
                        
                        <form id="profileForm">
                            {% csrf_token %}
                            
                            <div class="mb-3">
                                <label class="form-label-custom">昵称</label>
                                <input type="text" class="form-control form-control-custom" id="nickname" value="{{ user.nickname }}">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label-custom">个性签名</label>
                                <textarea class="form-control form-control-custom" id="signature" rows="3">{{ user.signature }}</textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label-custom">兴趣爱好</label>
                                <input type="text" class="form-control form-control-custom" id="interests" value="{{ user.interests }}" placeholder="多个标签用逗号分隔">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label-custom">邮箱</label>
                                <input type="email" class="form-control form-control-custom" id="email" value="{{ user.email }}">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label-custom">手机号</label>
                                <input type="tel" class="form-control form-control-custom" id="phone" value="{{ user.phone }}">
                            </div>
                            
                            <button type="button" class="btn btn-gradient-primary" onclick="saveProfile()">
                                <i class="fas fa-save"></i> 保存修改
                            </button>
                        </form>
                    </div>
                </div>
                
                <!-- 账号安全 -->
                <div class="tab-pane fade" id="security">
                    <div class="settings-content">
                        <h4 class="mb-4">账号安全</h4>
                        
                        <div class="mb-4">
                            <h6>修改密码</h6>
                            <form id="passwordForm">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label class="form-label-custom">当前密码</label>
                                    <input type="password" class="form-control form-control-custom" id="oldPassword">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label-custom">新密码</label>
                                    <input type="password" class="form-control form-control-custom" id="newPassword">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label-custom">确认新密码</label>
                                    <input type="password" class="form-control form-control-custom" id="confirmPassword">
                                </div>
                                <button type="button" class="btn btn-gradient-primary" onclick="changePassword()">
                                    <i class="fas fa-key"></i> 修改密码
                                </button>
                            </form>
                        </div>
                        
                        <hr>
                        
                        <div class="mb-4">
                            <h6>绑定账号</h6>
                            <div class="list-group">
                                <div class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <i class="fab fa-weixin fa-2x text-success me-2"></i>
                                        <span>微信</span>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">绑定</button>
                                </div>
                                <div class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <i class="fab fa-qq fa-2x text-primary me-2"></i>
                                        <span>QQ</span>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">绑定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 隐私设置 -->
                <div class="tab-pane fade" id="privacy">
                    <div class="settings-content">
                        <h4 class="mb-4">隐私设置</h4>
                        
                        <div class="mb-4">
                            <h6>个人资料隐私</h6>
                            <div id="profilePrivacy"></div>
                        </div>
                        
                        <div class="mb-4">
                            <h6>活动隐私</h6>
                            <div id="activityPrivacy"></div>
                        </div>
                        
                        <div class="mb-4">
                            <h6>社交隐私</h6>
                            <div id="socialPrivacy"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 通知设置 -->
                <div class="tab-pane fade" id="notification">
                    <div class="settings-content">
                        <h4 class="mb-4">通知设置</h4>
                        
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="emailNotification" checked>
                                <label class="form-check-label" for="emailNotification">
                                    邮件通知
                                </label>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="activityNotification" checked>
                                <label class="form-check-label" for="activityNotification">
                                    活动提醒
                                </label>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="commentNotification" checked>
                                <label class="form-check-label" for="commentNotification">
                                    评论通知
                                </label>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="followNotification" checked>
                                <label class="form-check-label" for="followNotification">
                                    关注通知
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 加载隐私设置
    function loadPrivacySettings() {
        const settings = {{ user.privacy_settings|safe }} || {};
        
        // 个人资料隐私
        const profilePrivacy = document.getElementById('profilePrivacy');
        const profileFields = {
            'nickname': '昵称',
            'avatar': '头像',
            'phone': '手机号',
            'email': '邮箱',
            'signature': '个性签名',
            'interests': '兴趣爱好'
        };
        
        let html = '';
        for (let [key, label] of Object.entries(profileFields)) {
            const checked = settings.profile?.[key] !== false;
            html += `
                <div class="form-check form-switch mb-2">
                    <input class="form-check-input" type="checkbox" id="profile_${key}" ${checked ? 'checked' : ''} onchange="updatePrivacy('profile', '${key}', this.checked)">
                    <label class="form-check-label" for="profile_${key}">${label}公开</label>
                </div>
            `;
        }
        profilePrivacy.innerHTML = html;
        
        // 活动隐私
        const activityPrivacy = document.getElementById('activityPrivacy');
        const activityFields = {
            'created_activities': '创建的活动',
            'joined_activities': '参与的活动',
            'comments': '评论',
            'ratings': '评分'
        };
        
        html = '';
        for (let [key, label] of Object.entries(activityFields)) {
            const checked = settings.activity?.[key] !== false;
            html += `
                <div class="form-check form-switch mb-2">
                    <input class="form-check-input" type="checkbox" id="activity_${key}" ${checked ? 'checked' : ''} onchange="updatePrivacy('activity', '${key}', this.checked)">
                    <label class="form-check-label" for="activity_${key}">${label}公开</label>
                </div>
            `;
        }
        activityPrivacy.innerHTML = html;
        
        // 社交隐私
        const socialPrivacy = document.getElementById('socialPrivacy');
        const socialFields = {
            'following_list': '关注列表',
            'follower_list': '粉丝列表',
            'points': '积分'
        };
        
        html = '';
        for (let [key, label] of Object.entries(socialFields)) {
            const checked = settings.social?.[key] !== false;
            html += `
                <div class="form-check form-switch mb-2">
                    <input class="form-check-input" type="checkbox" id="social_${key}" ${checked ? 'checked' : ''} onchange="updatePrivacy('social', '${key}', this.checked)">
                    <label class="form-check-label" for="social_${key}">${label}公开</label>
                </div>
            `;
        }
        socialPrivacy.innerHTML = html;
    }
    
    // 更新隐私设置
    function updatePrivacy(category, field_name, is_public) {
        axios.post('/users/api/privacy/', {
            category: category,
            field_name: field_name,
            is_public: is_public
        })
        .then(response => {
            showSuccess('设置已更新');
        })
        .catch(error => {
            showError('更新失败');
        });
    }
    
    // 保存基本资料
    function saveProfile() {
        const data = {
            nickname: document.getElementById('nickname').value,
            signature: document.getElementById('signature').value,
            interests: document.getElementById('interests').value,
            email: document.getElementById('email').value,
            phone: document.getElementById('phone').value
        };
        
        axios.post('/users/settings/', data)
            .then(response => {
                showSuccess('保存成功');
            })
            .catch(error => {
                showError('保存失败');
            });
    }
    
    // 修改密码
    function changePassword() {
        const oldPassword = document.getElementById('oldPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        
        if (!oldPassword || !newPassword || !confirmPassword) {
            showError('请填写完整信息');
            return;
        }
        
        if (newPassword !== confirmPassword) {
            showError('两次输入的密码不一致');
            return;
        }
        
        axios.post('/users/api/change-password/', {
            old_password: oldPassword,
            new_password: newPassword
        })
        .then(response => {
            showSuccess('密码修改成功');
            document.getElementById('passwordForm').reset();
        })
        .catch(error => {
            showError('密码修改失败');
        });
    }
    
    // 页面加载时初始化
    document.addEventListener('DOMContentLoaded', function() {
        loadPrivacySettings();
    });
</script>
{% endblock %}
